<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1474698_th64rwphgke.css">
    <link rel="stylesheet" href="../../css/common.css">
    <title>视频详情</title>
    <style>
        html,body{
            background-color: #FAF8F4;
        }
        .header{
            background: transparent;
        }
        .header .back{
           width: 1rem;
        }
        .header .right{
            width: 1rem;
        }
        .main{
            padding-top: 0!important;
        }
        .banner{
            width: 100%;
            height: 4.23rem;
        }
        .info-card{
            width: 100%;
            height: auto;
            background-color: #fff;
            padding: 0 .3rem;
            margin-bottom: .1rem;
        }
        .info-card .title{
            width: 100%;
            padding: .28rem 0;
            font-size:.36rem;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(51,51,51,1);
        }
        .info-card .desc{
            width: 100%;
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:.4rem;
        }
        .info-card .btm{
            width: 100%;
            height: auto;
            padding: .2rem 0;
        }
        .info-card .btm .item{
            height: auto;
            margin-right: .7rem;
          
        }
        .info-card .btm .item img{
            width: .26rem;
            height: auto;
            margin: 0;
            margin-right: .11rem;
        }
        .info-card .btm .item span{
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .info-dtl{
            width: 100%;
            height: auto;
            background-color: #fff;
            padding: 0 .3rem;

        }
        .info-dtl .menu{
            width: 100%;
            height: auto;
        }
        .info-dtl .menu .item{
            width: 1.4rem;
            line-height: 1.16rem;
            font-size:.32rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(51,51,51,1);
            margin-right: .41rem;
            text-align: center;
        }
        .info-dtl .menu .item.active{
            color:rgba(251,92,89,1);
            font-weight:bold;
            background-image: url('../../image/tabbg.png');
            background-size: 60%;
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }
        .dtl{
            padding-bottom: .2rem;
        }
        .eval-list{
            width: 100%;
            height: auto;
        }
        .eval-list .item{
            width: 100%;
            margin-top: .4rem;
        }
        .eval-list .item .left{
            width: .8rem;
            height: .8rem;
            border-radius: 50%;
            overflow: hidden;
        }
        .eval-list .item .right {
            margin-left: .2rem;
            padding-bottom: .35rem;
            border-bottom: 1px solid #E8E8E8;
        }
        .eval-list .item:last-child .right{
            border-bottom: 0;
        }
        .eval-list .item .right .name{
            font-size:.32rem;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(51,51,51,1);
            margin-bottom: .1rem;
        }
        .eval-list .item .right .dtl-ms{
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:.4rem;
        }
        .eval-list .item .right .time{
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(204,204,204,1);
        }
        .eval-list .more{
            line-height: 1.02rem;
            text-align: center;
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .footer{
            padding: 0 .31rem;
            background-color: #fff;
            border-top: 1px solid #E8E8E8;
        }
        .footer .ipt{
            width: 5.6rem;
            height: .68rem;
            background:rgba(238,239,239,1);
            border-radius:.1rem;
            padding: 0 .3rem;
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color: #333;
        }
        .footer .ipt::placeholder{
            color:rgba(158,164,169,1);
        }
        .footer .ipt::-webkit-input-placeholder{
            color:rgba(158,164,169,1);
        }
        .footer .btn{
            width:1rem;
            height:.58rem;
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(255,255,255,1);
        }
        .list-box{
            overflow: hidden;
            background-color: #fff;
            margin-top: .1rem;
        }
        .list-box .title{
            text-align: left; 
            padding: 0 .3rem;
            font-size:.32rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(51,51,51,1);
        }
        .list-item{
            margin-bottom: .3rem;
            box-shadow:0px 0px 13px 0px rgba(248,238,224,1);
        }
        .list-item .left{
            border-radius: .1rem;
            overflow: hidden;
        }
        /* 固定选择 */
        .share-type{
            width: 2.14rem;
            height: auto;
            border-radius: .2rem;
            background-color: #fff;
            position: fixed;
            right: .4rem;
            top: .88rem;
            z-index: 1400;
        }
        .share-type .sanjiao{
            width: 0;
            height: 0;
            border-width:0 .16rem .16rem;
            border-style:solid;
            border-color:transparent transparent #fff;/*透明 透明  灰*/
            position: absolute;
            right: .2rem;
            top: -0.16rem;
        }
        .share-type .item{
            width: 100%;
            line-height: .7rem;

        }
        .share-type .item img{
            width: .32rem;
            height: auto;
            margin: 0;
            margin-right: .08rem;
        }
        .share-type .item span{
            font-size:.32rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(51,51,51,1);
            margin-left: .08rem;
        }
    </style>
</head>
<body>
    <div id="root" class="elehide">
        <header class="header flex align-items space-between">
            <div class="back fn-ctr">
                <i class="iconfont iconfanhuianniu"></i>
            </div>
            <div class="middle"></div>
            <div class="right fn-ctr">
                <i class="iconfont iconsangedian-copy"></i>
            </div>
        </header>
        <!-- 固定定位元素 -->
        <div class="mask"></div>
        <div class="share-type">
            <div class="sanjiao"></div>
            <div class="item flex align-items flex-center">
                <img src="../../image/dtl_biji.png">
                <span>筆記</span>
            </div>
            <div class="item flex align-items flex-center">
                <img src="../../image/dtl_share.png">
                <span>分享</span>
            </div>
        </div>
        <div class="main">
            <div class="banner">
                <img src="../../image/index_banner.png" alt="">
            </div>
            <div class="info-card">
                <div class="title">油畫基礎課程</div>
                <div class="desc">油畫基礎畫法針對油畫人物風景的表述速寫，一學即會，零基礎也能學的專業素描課。</div>
                <div class="btm flex align-items flex-start">
                    <div class="item flex align-items flex-start">
                        <img src="../../image/watcher.png" alt="">
                        <span>2354</span>
                    </div>
                    <div class="item flex align-items flex-start">
                        <img src="../../image/collect.png" alt="">
                        <span>2354</span>
                    </div>
                </div>
            </div>
            <div class="info-dtl">
                <div class="menu flex align-items flex-start">
                    <div class="item active">課程詳情</div>
                    <div class="item">評論</div>
                </div>
                <div class="dtl disnone">
                    详尽讲解与示范工具认识与应用，基本造型知识点的解析与实操练习（如构图，形体结构，光影，空间，深入塑造等），对单个静物与简单静物组合的学习与示范。
                </div>
                <div class="eval-list">
                    <div class="item flex align-content-start space-between">
                        <div class="left">
                            <img src="../../image/heading.png" alt="">
                        </div>
                        <div class="right flex1">
                            <div class="name ellipse" >不吃魚的貓</div>
                            <div class="dtl-ms">特意來膜拜白老師的作品，非常棒，講解的也很清楚。每次聽得都很激動，老師很有耐心。</div>
                            <div class="time">2019-11-27 10:25</div>
                        </div>
                    </div>
                    <div class="item flex align-content-start space-between">
                        <div class="left">
                            <img src="../../image/heading.png" alt="">
                        </div>
                        <div class="right flex1">
                            <div class="name ellipse" >不吃魚的貓</div>
                            <div class="dtl-ms">特意來膜拜白老師的作品，非常棒，講解的也很清楚。每次聽得都很激動，老師很有耐心。</div>
                            <div class="time">2019-11-27 10:25</div>
                        </div>
                    </div>
                    <div class="more">查看更多評論</div>
                </div>
            </div>
            <div class="list-box">
                <div class="title">新课推荐</div>
                 <div class="list">
                    <div class="list-item flex align-items space-between" >
                        <div class="left">
                            <img src="../../image/list_pic.png" alt="">
                        </div>
                        <div class="right flex1 flex flex-wrap align-content-between">
                            <div class="txt1 ellipse">彩色鉛筆的魔法教程</div>
                            <div class="txt2 ellipse2">油畫基礎畫法針對油畫人物風景的表述速寫，一學即會。</div>
                            <div class="txt3 flex align-items flex-start">
                                <div class="txt3-item flex align-items flex-center">
                                    <img src="../../image/collect.png" alt="">
                                    <div class="num">2354</div>
                                </div>
                                <div class="txt3-item flex align-items flex-center">
                                    <img src="../../image/watcher.png" alt="">
                                    <div class="num">2354</div>
                                </div>
                            </div>
                        </div>
                     </div>
                     <div class="list-item flex align-items space-between" >
                         <div class="left">
                             <img src="../../image/list_pic.png" alt="">
                         </div>
                         <div class="right flex1 flex flex-wrap align-content-between">
                             <div class="txt1 ellipse">彩色鉛筆的魔法教程</div>
                             <div class="txt2 ellipse2">油畫基礎畫法針對油畫人物風景的表述速寫，一學即會。</div>
                             <div class="txt3 flex align-items flex-start">
                                 <div class="txt3-item flex align-items flex-center">
                                     <img src="../../image/collect.png" alt="">
                                     <div class="num">2354</div>
                                 </div>
                                 <div class="txt3-item flex align-items flex-center">
                                     <img src="../../image/watcher.png" alt="">
                                     <div class="num">2354</div>
                                 </div>
                             </div>
                         </div>
                     </div>
                </div>
            </div>
            
        </div>
        <div class="footer flex align-items space-between">
            <input class="ipt" type="text" placeholder="一起來討論吧~">
            <div class="btn btnactive fn-ctr">發送</div>
        </div>
    </div>
    <script src="../../js/api.js"></script>
    <script src="../../js/vue-components.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../js/common.js"></script>
    <script>
          



    </script>
</body>
</html>